<template>
    <div class="quill-editor-wrap">
        <div :style="{ height: topHeight + 'px' }" class="clientRect" ref="clientRectRefs">
            <div :style="{ height: (topHeight - 40) + 'px' }">
                <QuillEditor v-model:content="option.content" :options="options" :modules="modules" toolbar="full"
                    content-type="html" theme="snow" />
            </div>
        </div>
        <div class="stretch" @mousedown="onMouseDown"><el-icon>
                <FullScreen />
            </el-icon></div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue"
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import ImageUploader from 'quill-image-uploader';
import { upload } from "@/api";
import { FullScreen } from '@element-plus/icons-vue'
export default defineComponent({
    props: {
        option: Object,
    },
    components: {
        QuillEditor,
        FullScreen
    },
    setup() {
        const isResizing = ref(false)
        const clientRectRefs = ref()
        const topHeight = ref(320)
        const content = ref('<h1>This is html header</h1>')
        const options = reactive({
            modules: {
                toolbar: {
                    container: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        [{ align: [] }], // 对齐方式
                        ['clean'], // 清除文本格式
                        ['link', 'image'], // 链接、图片、视频
                    ],
                },

            },
            placeholder: '请输入内容...'
        })
        const modules = {
            name: 'imageUploader',
            module: ImageUploader,
            options: {
                upload: file => {
                    return new Promise((resolve, reject) => {
                        const formData = new FormData();
                        formData.append("file", file);
                        upload(formData)
                            .then(res => {
                                resolve('/upapi/inline/' + res.data.data.FileNames[0]);
                            })
                            .catch(err => {
                                reject("Upload failed");
                                console.error("Error:", err)
                            })
                    })
                }
            }
        }
        const setValue = () => {
            console.log(content.value.ops[0].insert)
        }
        const onMouseDown = () => {
            isResizing.value = true

            // 监听鼠标移动事件
            document.addEventListener('mousemove', onMouseMove);
            // 监听鼠标松开事件
            document.addEventListener('mouseup', onMouseUp);
        }
        const onMouseMove = (event) => {
            if (isResizing.value) {
                // 计算鼠标在容器中的位置
                const containerRect = clientRectRefs.value.getBoundingClientRect();
                console.log(event.clientY, containerRect.top)
                const mouseX = event.clientY - containerRect.top;

                // 更新左侧和右侧容器的宽度
                topHeight.value = mouseX;
            }
        }
        const onMouseUp = () => {
            // 鼠标松开时停止拖动
            isResizing.value = false;

            // 移除监听鼠标移动和松开事件
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
        return {
            options,
            content,
            setValue,
            modules,
            topHeight,
            onMouseDown,
            clientRectRefs
        }
    }
})
</script>

<style lang="scss" scoped>
.quill-editor-wrap {
    margin-bottom: 50px;
    width: 100%;

    .ql-container,
    .ql-editor {
        height: 250px;
    }
}

.clientRect {}

.stretch {
    position: relative;
    min-width: 10px;
    height: 10px;
    cursor: col-resize;
    z-index: 99;

    .el-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        right: 0;
    }
}
</style>


